@extends('app')
@section('title', '支付管理')
@section('scriptLoad')
    <script src="{{asset("static/js/qrcode.js")}}"></script>
@endsection
@section('content')
    <div style="margin-bottom: 10px;display: inline-block;width: 100%">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>支付宝</span>
            </div>
            <div class="pay">
                <el-button @click="aliPay('pc')" type="primary" style="float: left;">测试支付-电脑端</el-button>
                <el-button @click="aliPay('wap')" type="primary" style="float: left;">测试支付-移动端</el-button>
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>微信</span>
            </div>
            <div class="pay">
                <el-button @click="wechatPay('pc')" type="primary" style="float: left;">测试支付-电脑端</el-button>
                <el-button disabled type="primary" style="float: left;">测试支付-移动端</el-button>
            </div>
        </el-card>
        <el-button @click="logout" type="info" style="float: right;">退出</el-button>
    </div>
    <el-table
        :data="payList"
        border
        style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="Id"
            width="100">
        </el-table-column>
        <el-table-column
            prop="account_id"
            label="所属号码ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="out_trade_no"
            label="订单号">
        </el-table-column>
        <el-table-column
            prop="amount"
            label="金额"
            width="100">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="200">
            <template slot-scope="scope">
                <el-tag
                    :type="showStatusType(scope.row.status)"
                    disable-transitions>@{{showStatus(scope.row.status)}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="created_at"
            label="创建时间"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="refund(scope.row)" type="primary" :disabled="scope.row.status !== 1" size="small">退款</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 10px;float: right;"
        background
        @current-change="selectCurrentPage"
        :hide-on-single-page="true"
        layout="total, prev, pager, next, jumper"
        :page-size="15"
        :pager-count="5"
        :current-page.sync="currentPage"
        :total="total">
    </el-pagination>
    <el-dialog
        :title="payTitle"
        :visible.sync="payDialogVisible"
        width="50%">
        <el-image
            style="width: 100%; height: 300px"
            :src="payImg"
            fit="contain">
        </el-image>
  </span>
    </el-dialog>
@endsection

@section('script')
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    payList         : [],
                    total           : 0,
                    currentPage     : 0,
                    activeIndex     : "pay",
                    showMenu        : true,
                    payTitle        : '',
                    payDialogVisible: false,
                    payImg          : ''
                }
            },
            mounted(){
              this.getPayList(1)
            },
            methods:{
                selectCurrentPage(page){
                    this.getPayList(page)
                },
                async getPayList(page){
                    const { data } =  await request.post('{{ MODULE_URL }}/pay/list',{ page })
                    this.payList = data.data
                    this.total = data.total
                },
                wechatPay(method)
                {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在获取支付二维码',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    request.post('{{ MODULE_URL }}/pay/wechat/' + method).then(res => {
                        this.payDialogVisible = true
                        this.payTitle = "微信支付"
                        QRCode.toDataURL(res.code_url,  (error,url) => {
                            if (error) {
                                this.$message.error(error)
                            }
                            this.payImg = url
                        })

                        loading.close();
                    })
                },
                refund(item){
                    const loading = this.$loading({
                        lock: true,
                        text: '退款中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    const payType = item.pay_type
                    request.post('{{ MODULE_URL }}/pay/' + payType + '/refund',{
                        out_trade_no: item.out_trade_no
                    }).then(res => {
                        this.$message.success(res.message)
                        item.status = 2
                        loading.close();
                    }).catch(() => {
                        loading.close();
                    })
                },
                aliPay(method){
                    location.href = '{{ MODULE_URL }}/pay/alipay/' + method
                },
                logout(){
                    this.$confirm('是否确定退出登录？', '提示',{
                        center: true
                    }).then(() => {
                        request.post('{{ MODULE_URL }}/user/logout').then(res => {
                            this.$message.success(res.message)
                            document.cookie = ''
                            location.href = '{{ MODULE_URL }}/'
                        }).catch(() => {})
                    }).catch(() => {});
                },
                showStatusType(status){
                    switch (status){
                        case 1:
                            return 'success'
                        case 2:
                            return 'info'
                        default:
                            return ''
                    }
                },
                showStatus(status){
                    switch (status){
                        case 0:
                            return '未支付'
                        case 1:
                            return '已支付'
                        case 2:
                            return '已退款'
                        default:
                            return '未知'
                    }
                }
            }
        })
    </script>
@endsection
@section('style')
    <style>
        .box-card{
            margin-bottom: 10px;
            display: inline-block;
        }

        .pay{
            display: inline-block;
            margin-bottom: 8px;
        }
    </style>
@endsection
